<template>
    <div class="">
      <el-table :data="services" style="width: 100%">
      <el-table-column
        align="center"
        fixed
        prop="title"
        label="服务名称"
        width="150"
      />
      <el-table-column
        align="center"
        prop="price"
        label="服务价格"
        width="150"
      />
      <el-table-column
        align="center"
        prop="service_background"
        label="服务背景图"
        width="150"
      >
        <template #default="scope">
          <el-image :src="scope.row.service_background" />
        </template>
        </el-table-column>
        <el-table-column
        align="center"
        prop="service_introduction"
        label="服务介绍图"
        width="150"
      >
        <template #default="scope">
          <el-image :src="scope.row.service_introduction" />
        </template>
        </el-table-column>
        <el-table-column align="center" fixed="right" width="200">
        <template #default="scope">
          <el-button
            type="danger"
            size="small"
            @click="handleClick(scope.row.service_id)"
          >
            编辑
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    </div>
    <el-drawer v-model="editisshow" direction="rtl">
    <template #header>
      <h4>编辑服务</h4>
    </template>
    <template #default>
      <div v-if="editid=== 1">
        <el-form :model="services[0]" label-width="100px">
          <el-form-item label="服务名称">
            <el-input v-model="services[0].title" placeholder="请输入服务名称"></el-input>
          </el-form-item>
          <el-form-item label="服务价格">
            <el-input v-model="services[0].price" placeholder="请输入服务价格"></el-input>
          </el-form-item>
          <el-form-item label="服务背景图">
            <el-image style="width: 200px;height: 200px;" :src="services[0].service_background"></el-image>
            <input type="file" @change="handleFileChange1($event,0)"/>
          </el-form-item>
          <el-form-item label="服务介绍图">
            <el-image style="width: 200px;height: 200px;" :src="services[0].service_introduction"></el-image>
            <input type="file" @change="handleFileChange2($event,0)"/>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="editid=== 2">
        <el-form :model="services[0]" label-width="100px">
          <el-form-item label="服务名称">
            <el-input v-model="services[1].title" placeholder="请输入服务名称"></el-input>
          </el-form-item>
          <el-form-item label="服务价格">
            <el-input v-model="services[1].price" placeholder="请输入服务价格"></el-input>
          </el-form-item>
          <el-form-item label="服务背景图">
            <el-image style="width: 200px;height: 200px;" :src="services[1].service_background"></el-image>
            <input type="file" @change="handleFileChange1($event,1)"/>
          </el-form-item>
          <el-form-item label="服务介绍图">
            <el-image style="width: 200px;height: 200px;" :src="services[1].service_introduction"></el-image>
            <input type="file" @change="handleFileChange2($event,1)"/>
          </el-form-item>
        </el-form>
      </div>
      <div v-if="editid=== 3">
        <el-form :model="services[2]" label-width="100px">
          <el-form-item label="服务名称">
            <el-input v-model="services[2].title" placeholder="请输入服务名称"></el-input>
          </el-form-item>
          <el-form-item label="服务价格">
            <el-input v-model="services[2].price" placeholder="请输入服务价格"></el-input>
          </el-form-item>
          <el-form-item label="服务背景图">
            <el-image style="width: 200px;height: 200px;" :src="services[2].service_background"></el-image>
            <input type="file" @change="handleFileChange1($event,2)"/>
          </el-form-item>
          <el-form-item label="服务介绍图">
            <el-image style="width: 200px;height: 200px;" :src="services[2].service_introduction"></el-image>
            <input type="file" @change="handleFileChange2($event,2)"/>
          </el-form-item>
        </el-form>
      </div>
    </template>
    <template #footer>
      <div style="flex: auto">
        <el-button @click="editcancel">取消</el-button>
        <el-button type="primary" @click="save">保存</el-button>
      </div>
    </template>
  </el-drawer>
  </template>
  
  <script lang="ts" setup>
  import {ref,reactive,onBeforeMount} from 'vue'
  import {getservices,updateservice} from "@/service/api/service"
  import {uploadImage} from "@/service/api/image"
  import { ElMessage } from 'element-plus'

  onBeforeMount(()=>{
    getServices()
  })
  let services=ref([])
  let editid=ref(null)
  let editisshow=ref(false)

  function editcancel(){
    editisshow.value=false
    getServices()
  }
  function handleFileChange1(e,index){
    uploadImage(e.target.files[0],{
      user:'admin',
      use:'service',
      time:Date.now()
    }).then(res=>{
      console.log(res.data)
      services.value[index].service_background=res.data.imgUrl
    })
  }
  function save(){
      updateservice({
        service_id:editid.value,
        title:services.value[editid.value-1].title,
        price:services.value[editid.value-1].price,
        service_background:services.value[editid.value-1].service_background,
        service_introduction:services.value[editid.value-1].service_introduction
      }).then(res=>{
        if(res.data.code===200){
          editisshow.value=false
          ElMessage({
            message: "修改成功",
            type: "success",
          });
        getServices()
        }
        
      })
}
  function handleFileChange2(e,index){
    uploadImage(e.target.files[0],{
      user:'admin',
      use:'service',
      time:Date.now()
    }).then(res=>{
      console.log(res.data)
      services.value[index].service_introduction=res.data.imgUrl
    })
  }
  function getServices(){
    getservices().then((res)=>{
      if(res.data.code==200){
        services.value=res.data.data
      }
})
  }

  function handleClick(e){
    editid.value=e
    console.log(editid.value)
    editisshow.value=true
  }
  </script>
  
  
  <style lang="scss" scoped></style>
  